/*
 * @Descripttion:
 * @Author: jhw
 * @Date: 2023-05-15 22:21:54
 * @LastEditors: jhw
 * @LastEditTime: 2023-05-17 19:49:42
 */
import { computed } from 'vue';

export default function useWatermarkBg(props: any) {
  return computed(() => {
    const canvas = document.createElement('canvas');
    const devicePixelRatio = window.devicePixelRatio || 1;
    const fontSize = props.fontSize * devicePixelRatio;
    const font = fontSize + 'px Microsoft Yahei';
    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

    // 获取文字宽度
    ctx.font = font;
    const { width } = ctx?.measureText(props.text);
    const canvasSize = Math.max(100, width) + props.gap * devicePixelRatio;
    canvas.width = canvasSize;
    canvas.height = canvasSize;

    // 绘制文字
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate((Math.PI / 180) * -45);
    ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
    ctx.font = font;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(props.text, 0, 0);

    return {
      base64: canvas.toDataURL(),
      size: canvasSize,
      styleSize: canvasSize / devicePixelRatio,
    };
  });
}
